import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Button, { ButtonSize, ButtonType } from './button';

const styles: React.CSSProperties = {
  textAlign: 'center',
  display: 'flex',
  width: '60%',
  margin: '0 auto',
  justifyContent: 'space-around',
};

const CenterDecorator = (storyFn: any) => <div style={styles}>{storyFn()}</div>;

const defaultButton = () => (
  <Button onClick={action('clicked')}>default button</Button>
);

const buttonWithSize = () => (
  <>
    <Button size={ButtonSize.Large}>large button</Button>
    <Button size={ButtonSize.Small}>small button</Button>
  </>
);

const buttonWithType = () => (
  <>
    <Button btnType={ButtonType.Primary}>Primary button</Button>
    <Button btnType={ButtonType.Danger}>Danger button</Button>
    <Button btnType={ButtonType.Default}>Default button</Button>
    <Button btnType={ButtonType.Link}>Link button</Button>
  </>
);

storiesOf('Button Component', module)
  .addDecorator(CenterDecorator)
  .addParameters({
    info: {
      text: 'this is a very nice component',
    },
  })
  .add('默认 Button', defaultButton)
  .add('不同尺寸的 Button', buttonWithSize)
  .add('不同类型的 Button', buttonWithType);
